<template>
    <div class="header">
        <div class="frame" @mouseenter="listIn = true">
            <!--
            <div class="list animated" v-show="subListIn || listIn"  @mouseout="listout" @mouseenter="listIn = true">
                <el-popover

                        v-for="(item,index) in indexTypes.da_fenlei_data" :key="index"
                        placement="right"
                        trigger="hover">
                    <div class="sub-list" @mouseout="senter"   @mouseenter="sout">
                        <div class="sub-item"
                             @click="$router.push({name:'search',query:{id:item.Id,subId:sub.Id}})"
                             v-for="sub in indexTypes.xiao_fenlei_data.filter(subBrand=>subBrand.guishu_fenlei_id === item.Id)">
                            <el-image :src="sub.fenlei_img" :alt="sub.fenlei_mingcheng" :title="sub.fenlei_mingcheng"></el-image>
                            <span>{{sub.fenlei_mingcheng}}</span>
                        </div>
                    </div>
                    <template slot="reference">
                        <div class="game"
                             @click="$router.push({name:'search',query:{id:item.Id}})">
                            <el-image :src="item.fenlei_tupian" alt=""></el-image>
                            <span>{{item.fenlei_mingcheng}}</span>
                        </div>
                    </template>
                </el-popover>


            </div>-->
            <!--#409eff-->
            <el-cascader
                    id="cascader"
                    v-model="value"
                    :options="$store.state.brandData"
                    ref="cascader"
                    placeholder="游戏平台"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange">
                <template slot-scope="{ node, data }">
                    <div class="flex-align-center">
                        <el-image :src="data.img" style="width: 88px"></el-image>
                        <div class="name">
                            {{ data.label }} <span v-if="!node.isLeaf"> <!--({{ data.children.length }})--> </span>
                        </div>
                    </div>

                </template>

            </el-cascader>

        </div>
        <div class="hot">
            <div class="game" v-for="(item,index) in indexTypes.tuijian_fenlei" :key="item.Id" v-if="index<6"
                 @click="$router.push({name:'search',query:{subId:item.Id}})">
                <img :src="item.fenlei_img" alt="">
                <span>{{item.fenlei_mingcheng}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import mixins from '../mixin'

    export default {
        name: 'gameHeader',
        mixins: [mixins],
        components: {},
        data() {
            return {
                show: false,
                listIn: false,
                subListIn: false,
                value: ''
            }
        },
        computed: {
            ...mapGetters(['indexTypes']),
        },
        methods: {
            //跳转到搜索页
            handleChange(brand) {
                this.$router.push({name: 'search', query: {id: brand[0], subId: brand[1]}});
            }
        },
        mounted() {

        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .header {
        display: flex;
        width: @main-width;
        margin: 0 auto 20px auto;
        justify-content: center;
        align-items: center;

        .frame {
            position: relative;

            .button {
                background-color: @primary-color;
                color: white;
                padding: 12px 60px;
                border-right: 2px;
                user-select: none;
            }

            .list {
                top: 44px;
                position: absolute;
                background-color: white;
                border: 1px solid @primary-color;
                left: 0;
                right: 0;
                z-index: 99;
                transition: all .8s;

                .game {
                    padding: 15px;
                    transition: all .3s;
                    position: relative;
                    box-sizing: border-box;

                    &:not(:last-child) {
                        border-bottom: 1px solid #eee;
                    }

                    &:hover {
                        box-shadow: 0 2px 8px #0a1015;


                    }
                }

            }

            &:hover {
                .button {
                    opacity: .9;
                }

                .list {
                    opacity: 1;
                    display: block;
                }
            }
        }

        .hot {
            flex: 1;
            display: flex;
            justify-content: space-around;

            .game {
                transition: all .5s;
                position: relative;
                box-sizing: border-box;

                &:hover {
                    transform: translate(3%, 0);

                }
            }

            img {
                width: 60px;
                margin-right: 5px;
            }
        }
    }


</style>
<style lang="less">
    .el-cascader-panel {
        .el-cascader-menu:nth-child(2) {
            width: 700px;

            .el-cascader-menu__list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                padding: 15px 0;
                height: 50%;
                min-height: auto;

                .flex-align-center {
                    display: block;
                    text-align: center;

                    .name {
                        margin-top: -20px;
                    }
                }

                .el-cascader-node {
                    margin-bottom: 35px;

                    img {
                        transition: all .6s;
                    }

                    &:hover {
                        background: transparent;

                        img {
                            transform: scale(1.1);
                        }
                    }
                }

            }
        }

        .el-scrollbar:nth-child(1) {
            .el-scrollbar__wrap {
                height: auto;
            }
        }

        .el-scrollbar:nth-child(2) {
            .el-scrollbar__wrap {
                height: 500px;
                max-height: 500px;
            }
        }

        .el-cascader-node {
            padding: 20px 10px !important;
            display: flex;
            align-items: center;
        }

    }
</style>
<style lang="less">
    #cascader {
        .el-input__inner {
            border-color: #409eff;
        }

        .el-input__inner::placeholder, .el-input__suffix-inner {
            color: white;
            text-align: center;
        }

        .el-cascader, .el-input, .el-input__inner {
            background: #409eff;
            border-radius: 4px;
            color: white;
            text-align: center;
        }

    }

    .el-cascader-menu {
        min-width: 220px;
    }
</style>
